<div id="app">
    <admin-page-header back>
        <bi-button icon="fa-save" @click="save" type="primary">保存</bi-button>
    </admin-page-header>
    <div class="container">
        <bi-form ref="form">
        <div class="row g-2">
            
            <div class="col-12">
                <bi-card>
                    <bi-form-item label="类型">
                        <bi-radio v-model="form.type" :option="typeOption" required :clear="false"></bi-radio>
                    </bi-form-item>
                    <bi-form-item label="面额"> 
                        <bi-input v-model="form.price" placeholder="请输入面额" required ></bi-input>
                    </bi-form-item>
                    <bi-form-item label="满多少元可用">
                        <bi-input v-model="form.condition_price" placeholder="请输入满多少元可用" required ></bi-input>
                    </bi-form-item>
                    <bi-form-item label="分组">
                        <bi-select :option="$pageData.group" v-model="form.group_id" required :clear="false" ></bi-select>
                    </bi-form-item>
                    
                    <bi-form-item label="描述">
                        <bi-input v-model="form.desc" placeholder="请输入描述" ></bi-input>
                    </bi-form-item>
                    <bi-form-item label="库存">
                        <bi-input v-model="form.stock" placeholder="请输入库存" required ></bi-input>
                    </bi-form-item>
                    <bi-form-item label="有效期">
                        <div class="row g-2">
                            <div class="col"><bi-datetime v-model="form.starttime"  placeholder="请选择开始时间" required ></bi-datetime></div>
                            <div class="col"><bi-datetime v-model="form.endtime"  placeholder="请选择结束时间" required ></bi-datetime></div>
                        </div>
                    </bi-form-item>
                    <bi-form-item label="领取限制">
                        <bi-input v-model="form.member_receive_number" placeholder="请输入领取限制" required ></bi-input>
                    </bi-form-item>

                    <bi-form-item label="领取方式">
                        <bi-radio v-model="form.apply_type" :option="applyTypeOption" required :clear="false"></bi-radio>
                    </bi-form-item>
                </bi-card>
            </div>
            <div class="col-12" v-if="form.apply_type=='goods'">
                <bi-card  title="指定商品和分类">
                    <bi-form-item label="商品">
                        <goods-list v-model="form.apply_goods_list" ></goods-list>
                    </bi-form-item>
                    <bi-form-item label="分类">
                        <bi-list :data="cateList"  @add="addCate" @del="delCate"  v-slot="{item,index}"   >
                            <cate v-model="cateList[index]"  ></cate>
                        </bi-list>
                    </bi-form-item>
                </bi-card>
            </div>
            
        </div>
    </bi-form>
    </div>
</div>

<script>
import goodsList  from './field/goods-list.vue';
import cate from './field/cate.vue';
let app = admin.createApp({
    components:{
        goodsList,
        cate
    },
    data() {

        let form = {
            coupon_id:'',
            group_id:'',
            type:'goods',
            desc: '',
            price:0,
            condition_price:0,
            stock:0,
            updated_at: '',
            starttime:'',
            endtime:'',
            member_receive_number:0,
            apply_type:'all',
            apply_goods_list:'',
            apply_cate_list:''
        }

        this.$assign(form,this.$pageData.coupon);
        let typeOption = [
            {label:'商品卷',value:'goods'},
            {label:'运费卷',value:'freight'},
        ]

        let applyTypeOption = [
            {label:'全部商品',value:'all'},
            {label:'指定商品和分类',value:'goods'},
        ]

        let cateList = [''];
        if (form.apply_cate_list){
            cateList = form.apply_cate_list.split(',');
        }
        return {
            form,
            typeOption,
            applyTypeOption,
            cateList
        }
    },
    watch:{
        cateList:{
            handler(value){
                this.form.apply_cate_list = value.join(',');
            },
            deep:true
        }
    },
    methods:{
        save(){
            if (this.$refs.form.check()){
                this.$ajax({
                    url:this.$url({action:'save'}),
                    data:this.form,
                    success:()=>{
                        this.$toast('保存成功');
                        this.$go(-1);
                    }
               });
            }
        },
        addCate(){
            this.cateList.push(''); 
        },
        delCate(index){
            if (this.cateList.length==1){
                this.cateList = [''];
            }else{
                this.cateList.splice(index,1);
            }
        }
    }
}).mount('#app');
</script>